<template>
  <div class="login-page">
    <div class="login">
      <div class="logo">
        <el-icon class="icon">
          <StarFilled />
        </el-icon>
        <h2>后台管理系统</h2>
      </div>
      <p>密码登录</p>
      <el-form label-width="auto" style="max-width: 400px;">
        <el-form-item>
          <el-input v-model="username" placeholder="请输入用户名"  />
        </el-form-item>
        <el-form-item>
          <el-input v-model="password"  type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item>
          <div class="button-pwd">
            <el-checkbox class="remember">记住我</el-checkbox>
            <el-button class="custom-button">忘记密码</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" round @click="handleLogin">登录</el-button>
        </el-form-item>
        <el-form-item>
          <div class="button-pwd">
            <el-button class="log-button">验证码登录</el-button>
            <el-button class="log-button" @click="goToRegister">注册账号</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-divider content-position="center"><span class="divider">其他账号登录</span></el-divider>
          <el-button type="primary">超级管理员</el-button>
          <el-button type="primary">管理员</el-button>
          <el-button type="primary">普通用户</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref,h } from 'vue'
import { useRouter } from 'vue-router'
import { StarFilled } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import api from '@/utils/axios';

const username = ref('')
const password = ref('')
const router = useRouter()

const handleLogin = async () => {
  try {
    const response = await api.post('/auth/login', {
      username: username.value,
      password: password.value
    });
    const token = response.data.token;
    localStorage.setItem('token', token); // 保存 JWT 到本地存储
    router.push('/home'); // 跳转到首页
    ElNotification({
      title: '登录成功',
      message: '欢迎回来！',
      type: 'success'
    });
  } catch (error) {
    ElNotification({
      title: '登录失败',
      message: '用户名或密码错误',
      type: 'error'
    });
  }
};

const goToForgetPassword = () => {
  router.push('/forget-password'); // 假设有一个忘记密码页面
};

const goToVerificationLogin = () => {
  router.push('/verification-login'); // 假设有一个验证码登录页面
};

const goToRegister = () => {
  router.push('/register'); // 假设有一个注册页面
};

</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to right, #5fb0f8, #00f2fe);
}

.login {
  background-color: #fff;
  padding: 0px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0px;
  color: #0ba9b1;
}

.icon {
  font-size: 40px;
  margin: 10px;
}

p {
  padding: 0px;
  font-size: 14px;
  color: #09d0da;
}

.button-pwd {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.log-button {
  width: 100%;
}

.remember {
  display: block;
  font-size: 10px;
  color: rgb(188, 193, 196);
}

.custom-button {
  /* 去掉边框 */
  border: none;
  /* 去掉背景颜色 */
  background-color: transparent;
  /* 去掉默认的按钮样式 */
  padding: 0;
  margin: 0 0 0 0px;
  /* 可以根据需要调整字体颜色 */
  color: rgb(188, 193, 196);
  /* 默认黑色字体 */

  /* 鼠标悬停时的样式 */
  &:hover {
    background-color: transparent;
    border: none;
    color: #007bff;
    /* 悬停时字体颜色 */
  }

  /* 点击时的样式 */
  &:active {
    background-color: transparent;
    border: none;
    color: #0056b3;
    /* 点击时字体颜色 */
  }
}

.login-btn {
  width: 100%;
}

.divider {
  margin: 0;
  font-size: 10px;
  color: rgb(188, 193, 196);
}
</style>
